import { h, defineProps, defineEmits, toRefs } from 'vue';
import { deepClone } from '@/utils/index';
import { defineComponent } from 'vue';

const props = defineProps({
  conf: {
    type: Object,
    required: true
  }
});

const { conf } = toRefs(props);
const emit = defineEmits(['upload', 'deleteUpload', 'previewUpload', 'input']);

const componentChild = {};

// 将./slots中的文件挂载到对象componentChild上
// 文件名为key，对应JSON配置中的__config__.tag
// 文件内容为value，解析JSON配置中的__slot__
// const slotsFiles = require.context('./slots', false, /\.js$/);
// const keys = slotsFiles.keys() || [];
// keys.forEach(key => {
//   const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1');
//   const value = slotsFiles(key).default;
//   componentChild[tag] = value;
// });

// 使用 import.meta.glob 动态导入 ./slots 目录下的所有 .js 文件
const modules = import.meta.glob('./slots/*.js', { eager: true });

for (const path in modules) {
  const tag = path.replace(/^\.\/slots\/(.*)\.js$/, '$1');
  componentChild[tag] = modules[path].default;
}


function vModel(dataObject, defaultValue, config) {
  // 获取上传表单元素组件上传的文件
  if (config.tag === "el-upload") {
    // 上传表单元素组件的成功和移除事件
    dataObject.attrs["on-success"] = (response, file, fileList) => {
      emit("upload", response, file, fileList);
    };

    dataObject.attrs["on-remove"] = (file, fileList) => {
      emit("deleteUpload", file, fileList);
    };

    dataObject.attrs["on-preview"] = (file, fileList) => {
      emit("previewUpload", file, fileList);
    };

    // 获取上传表单元素的默认值
    try {
      dataObject.props["file-list"] = JSON.parse(defaultValue);
    } catch (err) {
      console.warn(err);
    }

    return;
  }

  // 获取普通表单元素的值
  dataObject.props.value = defaultValue;
  dataObject.on.input = (val) => {
    emit("input", val);
  };
}

function mountSlotFiles(h, confClone, children) {
  const childObjs = componentChild[confClone.__config__.tag];
  if (childObjs) {
    Object.keys(childObjs).forEach(key => {
      const childFunc = childObjs[key];
      if (confClone.__slot__ && confClone.__slot__[key]) {
        children.push(childFunc(h, confClone, key));
      }
    });
  }
}

function emitEvents(confClone) {
  ['on', 'nativeOn'].forEach(attr => {
    const eventKeyList = Object.keys(confClone[attr] || {});
    eventKeyList.forEach(key => {
      const val = confClone[attr][key];
      if (typeof val === 'string') {
        confClone[attr][key] = event => emit(val, event);
      }
    });
  });
}

function buildDataObject(confClone, dataObject) {
  Object.keys(confClone).forEach(key => {
    const val = confClone[key];
    if (key === '__vModel__') {
      vModel(dataObject, confClone.__config__.defaultValue, confClone.__config__);
    } else if (dataObject[key] !== undefined) {
      if (dataObject[key] === null
        || dataObject[key] instanceof RegExp
        || ['boolean', 'string', 'number', 'function'].includes(typeof dataObject[key])) {
        dataObject[key] = val;
      } else if (Array.isArray(dataObject[key])) {
        dataObject[key] = [...dataObject[key], ...val];
      } else {
        dataObject[key] = { ...dataObject[key], ...val };
      }
    } else {
      dataObject.attrs[key] = val;
    }
  });

  // 清理属性
  clearAttrs(dataObject);
}

function clearAttrs(dataObject) {
  delete dataObject.attrs.__config__;
  delete dataObject.attrs.__slot__;
  delete dataObject.attrs.__methods__;
}

function makeDataObject() {
  return {
    class: {},
    attrs: {},
    props: {},
    domProps: {},
    nativeOn: {},
    on: {},
    style: {},
    directives: [],
    scopedSlots: {},
    slot: null,
    key: null,
    ref: null,
    refInFor: true
  };
}

const render = (h) => {
  const dataObject = makeDataObject();
  const confClone = deepClone(conf.value);
  const children = confClone.$slots.default || [];

  // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
  mountSlotFiles(h, confClone, children);

  // 将字符串类型的事件，发送为消息
  emitEvents(confClone);

  // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
  buildDataObject(confClone, dataObject);

  return h(confClone.__config__.tag, dataObject, children);
};
export default render